<!--视频号发布——，视频号发布统一H5页面-->
<template>
  <div class="ele-body">
    <!--hide-required-asterisk:是否隐藏必填字段的标签旁边的红色星号-->
    <!--/*视频号隐藏修改，需展示*/-->
    <div v-if="videoShow">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      :show-message="false"
      label-width="114px"
      @keyup.enter.native="submit"
      @submit.native.prevent>
      <el-card shadow="never">
        <div class="tiktok-title">视频号发布</div>
        <el-row :gutter="20" class="flex-start" style="margin-bottom: 100px">
          <el-steps direction="vertical" :active="stepsActive" style="height: 524px;margin:0 20px;min-width: 140px" finish-status="process">
            <el-step title="第一步" description="选择素材"/>
            <el-step title="第二步" description="选择挂载与文案"/>
            <el-step title="第三步" description="选择IP属地"/>
          </el-steps>
          <el-col :md="16" :lg="10">
            <el-form-item label="发布任务名称" prop="sphName">
              <el-input
                v-model="form.sphName"
                class="in-append"
                type="text"
                placeholder="请输入任务名称"
                clearable>
              </el-input>
            </el-form-item>
            <div class="flex-align-center d-margin">
              <div v-for="(i,j) in materialType" :key="j" :class="(Number(form.materialType)-1) == j ? 'sel-title-class' : 'title-class'" class="pointer" @click="materialTypeClick(j)">
                {{i.name}}
              </div>
            </div>
           <!-- <el-form-item label="剪辑类型" prop="clipType" v-if="form.materialType==1">
              <el-radio-group v-model="form.clipType" @input="projectInit">
                <el-radio :label="2">口播剪辑</el-radio>
                <el-radio :label="1">AI剪辑</el-radio>
                <el-radio :label="3">图文剪辑</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-form-item label="文件夹" prop="projectName" class="check-star"
                          :rules="!form.projectName  ? { required: true, message: '请选择文件夹', trigger: ['blur','change']} : {required: false}"
                          v-if="form.materialType==1">
              <activities ref="connected" :dataInfo="form" @getData="getData" :hint="hint"></activities>
            </el-form-item>

            <el-form-item label="文件夹" prop="projectName" class="check-star"
                          :rules="!form.projectName  ? { required: true, message: '请选择文件夹', trigger: ['blur','change']} : {required: false}"
                          v-if="form.materialType==2">
              <div style="width: 30%;">
                <piecesCom ref="connected" :dataInfo="form" @getData="getData" :hint="hint"></piecesCom>
              </div>
            </el-form-item>

            <!--<el-form-item label="所属平台" style="margin-top: 80px">
              <el-radio-group v-model="seoInfo.platform" @input="seoInit">
                <el-radio :label="1">D音</el-radio>
                <el-radio :label="2">K手</el-radio>
                <el-radio :label="3">视频号</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-form-item label="SEO文案" prop="seoName" style="margin-top: 80px"
                          :rules="!form.seoName  ? { required: true, message: '请选择文案', trigger: ['blur','change']} : {required: false}">
              <!--SEO文案-->
              <acties ref="seoActies" :lists="seoList" @getData="selectCopy"></acties>
              <!--<el-select
                v-model="form.seoName"
                placeholder="请选择文案"
                class="ele-block"
                clearable
                @change="selectCopy"
              >
                <el-option :label="i.taticsName" :value="i" v-for="(i,j) in seoList" :key="j" />
              </el-select>-->
            </el-form-item>

            <el-form-item label="挂载类型" prop="mountType">
              <el-radio-group v-model="form.mountType">
                <el-radio :label="1">公众号文章</el-radio>
                <el-radio :label="3">不挂载</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="链接" prop="url" v-if="form.mountType==1">
              <el-input
                class="in-append"
                type="text"
                v-model="form.url"
                placeholder="请输入链接地址"
                clearable>
              </el-input>
            </el-form-item>


            <el-form-item label="IP属地" prop="ipLocation" :style="form.mountType==1 ? 'margin-top: 80px' : 'margin-top: 138px'">
              <el-select
                v-model="form.ipLocation"
                placeholder="请选择IP属地"
                class="ele-block"
                clearable
                @change="ipChange"
              >
                <div v-for="(i,j) in getProvince" :key="j">
                  <el-option :label="i.areaName" :value="j" />
                </div>
              </el-select>
            </el-form-item>
            <!--请先到高德地图官网申请 key 并填写-->
            <!--<ele-map-picker
              :show.sync="visible"
              :need-city="true"
              map-key="D4FBZ-TGQ6J-I2HFZ-FVHIT-VLIH7-Z6BZS"
              @done="onDone" />-->
            <el-form-item label="位置" prop="ipLocation">
              <div @click="selPosition" :class="mapInfo.address ? 'ai-blue' : 'ai-btn'" class="ai-class pointer">{{mapInfo.address?mapInfo.address:'选择位置'}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary" @click="confirm" style="margin-left: 10px" :loading="loading">确认提交</el-button>
      </el-card>
    </el-form>
    </div>
<!--    视频号-->
    <div v-else>
      <el-card shadow="never" class="flex height80vh">
      <el-image  fit="contain" :src="require('/src/static/video-none.png')"></el-image>
      </el-card>
    </div>
    <!--    D音授权二维码——暂未使用-->
    <scan-code ref="codeDialog" :codeInfo="codeInfo" @success="codeSussess"></scan-code>
<!--    <position ref="pos" :visibleMap="visibleMap"  @chooseMapPoint="getCallMap" @cancel="cancelMap" @sure="sureMap"></position>-->
    <!--选择位置——腾讯地图-->
    <position ref="pos"  @chooseMapPoint="getCallMap" @sure="sureMap"></position>
  </div>
</template>

<script>
  import EleMapPicker from 'ele-admin/es/ele-map-picker';
  import getProvince from '/src/utils/video-province'
  import activities from '@/components/activities/connected-activities'
  import acties from '@/components/pagination/activities';
  import piecesCom from '@/components/activities/pieces-activities'
  import scanCode from './code-img'
  import position from './components/position'
  import {publishCreateVideo, publishVideo} from '@/api/releaseManage/videoId'
  import {listUserFiles, publicFile} from "@/api/creatCenter/material";
  import {projectPage} from "@/api/creatCenter/authoringClips";
  import {querySeo} from "@/api/matrixManage/seo";
  import RegionsSelect from "@/components/RegionsSelect/index";
  import {areaList} from "@/api/matrixManage/groupManage";
  import {submitDiyJob, submitImageJob, submitProjectJob} from "@/api/explosiveCode/releaseActivity";
  import {getRegionLabel} from "ele-admin/packages/utils/regions";
  export default {
    components:{position,EleMapPicker , scanCode, activities, acties,piecesCom},
    name: "index",
    data() {
      return{
        // visibleMap: true,
        mapInfo:{
          address:''
        }, // 选中的地图信息

        // 是否显示地图选择弹窗
        // visible: true,
        materialType: [
          {
            name:'云创作成片库',
            id:1
          },
          {
            name:'云闪推成片库',
            id:2
          }
        ],
        // IP属地
        areaRegion:[],
        // ‘无痕扫码’ 用户名
        codeInfo:{},
        loading:false,
        // 步骤条 进度
        stepsActive: 2,
        form:{
          // 云创作成片库/云闪推成片库，分类
          materialType:1,
          mountType:1
        },
        // 列表数据
        dataList: [],
        list: [],
        initInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1
        },
        // seo 列表
        seoList:[],
        rules:{
          sphName: [
            {
              required: true,
              message: '请输入发布任务名称',
              trigger: 'blur'
            }
          ],
          /*projectName: [
            {
              required: true,
              message: '请选择活动名称',
              trigger: 'blur'
            }
          ],*/
          seoName: [
            {
              required: true,
              message: '请选择文案',
              trigger: 'blur'
            }
          ],
          mountType: [
            {
              required: true,
              message: '请选择挂载',
              trigger: 'blur'
            }
          ],
          url: [
            {
              required: true,
              message: '请输入链接',
              trigger: 'blur'
            }
          ],

          ipLocation: [
            {
              required: true,
              message: '请选择IP属地',
              trigger: 'blur'
            }
          ]
        },
        seoInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          // seo 所属平台：1D音2K手3视频号
          platform:3
        },
        hint:'',
        getProvince:getProvince//固定视频号省级list
      }
    },
    // 路由刷新
    activated() {

      // console.log(getProvince(value));
      // const regionLabel = getProvince(value);
      console.log("获取视频号省级数据getProvince(value)============",this.getProvince)
      this.$nextTick(() => {
        this.$refs['connected'].init()
      })

      // this.init()
      this.projectInit()
      this.seoInit()
    },
    created(){
    },
    methods:{
/*修改start*/
      // 地图 初始值
      getCallMap (e) {
        console.log(e)
      },
      // 地图 取消
      cancelMap () {
        this.visibleMap = false
      },
      // 地图 确认
      sureMap(e){
        console.log("地图 确认e========",e)
        this.mapInfo=e
        /*longitude 经度
        latitude 纬度
        city 城市即详细地址*/
        this.form.longitude=e.lng
        this.form.latitude=e.lat
        this.form.city=e.address
      },
      /*修改end*/



      /* 地图选择后回调 */
     /* onDone(location) {
        console.log('地图选择后回调',location);
      },*/
      // 切换 ‘类型’
      materialTypeClick(e){
        // 素材类型 1.云创作成片库 2.云闪推成片库
        this.form.materialType=this.materialType[e].id
        this.form.projectId=''
        this.form.projectName=''
      },
      init(){
        //获取IP属地_暂不需要使用该接口!!
        areaList('')
          .then((data) => {
            this.areaRegion=data.data
          })
      },

      // 选择ip属地
      ipChange(e){
        this.form.ipLocation=this.getProvince[e].areaName
        this.form.area=this.getProvince[e].areaCode
        console.log("this.form",this.form)
      },
      getData(e){
        this.form.projectId=e.id //剪辑工程ID
        // 1:云创作成片库 2：云闪推成片库
        if(this.form.materialType==2){
          this.$set(this.form,'projectName',e.projectName) //剪辑工程名
        }
        else{
          this.$set(this.form,'projectName',e.name) //剪辑工程名
        }

      },
      projectInit(){
        if(this.form.projectName){
          delete this.form.projectId     //剪辑工程ID
          delete this.form.projectName   //剪辑工程名
        }
        this.$nextTick(() => {
          this.$refs['connected'].init()
        })
        return
        // 活动名称
        projectPage(this.initInfo)
          .then((data) => {
            this.list=data.list;
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      seoInit(){
        /*if(this.form.seoName){
          delete this.form.seoName
        }*/
        // 查询SEO文案【分页查询】 在查询列表页使用
        querySeo(this.seoInfo)
          .then((data) => {
            this.seoList=data.list
            this.$nextTick(()=>{
              this.$refs['seoActies'].init()
            })
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },

      // 选择 剪辑文件
      selectVideo(e){
        console.log('选择 视频素材',e)
        this.form.projectId=e.id //剪辑工程ID
        this.form.projectName=e.name //剪辑工程名
      },
      // 选择文案
      selectCopy(e){
        console.log('选择文案',e)
        this.form.seoId=e.id //SEO ID
        this.form.seoName=e.taticsName //SEO名称
      },
      // 确认提交 修改
      confirm(){
        this.$refs.form.validate((valid, obj) => {
          for(let i in obj){
            this.hint=obj[i][0].message
            break
          }
          if (valid) {
            // 修改1
            if(!this.form.projectId){
              this.hint='请选择文件夹'
              this.$message.error(this.hint)
              return
            }

            // 新增
            if(!this.mapInfo.address){
              this.hint='请选择位置'
              this.$message.error(this.hint)
              return
            }
            let name=this.$store.state.user.info.username
            publishVideo(this.form).then((data) => {
              console.log("调佣新增成功======", data)
              // 矩阵，视频号二维码跳转
              var host =window.location.host;
              let url = 'https://'+host+'/H5/aiorcode_index.html#/?videoId='+data.data.id+'&merchantId='+this.$store.state.user.info.merchantId+'&name='+ name +'&types=2'
              // let url = host+'/H5/aiorcode_index.html#/?videoId='+data.data.id+'&merchantId='+this.$store.state.user.info.merchantId+'&name='+ name +'&types=2'
              window.open(url)
              this.load()
            })
              .catch((e) => {
                this.$message.error(e);
                this.load()
              });

          }
          else {
            this.$message.error(this.hint)
            return false;
          }
        });
      },
      // 选择位置
      selPosition(){
        this.$nextTick(()=>{
          this.$refs['pos'].show()  // 视频号二维码展示
        })
      },
      // 确认提交 old——暂未使用
      confirm2(){
        this.$refs.form.validate((valid, obj) => {
          for(let i in obj){
            this.hint=obj[i][0].message
            break
          }
          if (valid) {
            // 修改1
            if(!this.form.projectId){
              this.hint='请选择文件夹'
              this.$message.error(this.hint)
              return
            }
            // 新增
            if(!this.mapInfo.address){
              this.hint='请选择位置'
              this.$message.error(this.hint)
              return
            }
            // 视频号二维码跳转
            /*var host =window.location.host;
            // var host ='oemkk.weijuyunke.com';
            let url = 'https://'+host+'/H5/aiorcode_index.html#/?videoId='+id+'&merchantId='+this.form.merchantId
            window.open(url)*/

            this.$refs['codeDialog'].show()  // 视频号二维码展示
          }
          else {
            this.$message.error(this.hint)
            return false;
          }
        });
      },
      // 扫描成功返回（子组件）
      codeSussess(e){
        this.form.cookie=e
        if(this.form.cookie){
          this.publishVideo()
        }
        else{
          this.$message.error("未获取到扫码信息，请重试！")
        }
      },
      publishVideo(){
        /*let parms= {
          area: 430000,
          video_url: 'https://wzgydy.oss-cn-shanghai.aliyuncs.com/p8wA4ckZN5.mp4',
          description: '这家店铺真不错#土鸡@码农胖达#家乡#美味@码农胖达#红太阳购物广场',
          short_title: '这家店铺真不错',
          cookie: 'sessionid=BgAANEiTUUYIoTx61%2F%2Bg5U%2B6g%2BGVGS3SDC8jzlS2eXU1OD6kBi8AyTEiFohXBwskpweOse8cBtr9Llk3vOV%2FeJSM1w%3D%3D; wxuin=3616207917',
          location: {"latitude": 26.445386, "longitude": 111.594039, "city": "红太阳购物广场(石牌楼街店)", "poiClassifyId": ""},
          topics: ['土鸡', '家乡', '美味', '红太阳购物广场'],
          mentions: '[{"nickname": "码农胖达"}, {"nickname": "码农胖达"}]',
          callback_uri: 'http://xxx.xxx?a=1&b=2'
        }*/
        // cookie
        // this.loading=true
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: '#ffffffe6'
        });
        console.log("this.form========",this.form)
        publishVideo(this.form).then((data) => {
          console.log("调佣新增成功======", data)
          publishCreateVideo(this.form)
            .then((data) => {
              // this.submitTo()
              this.load()             // 修改1
              this.$message.success('发布成功！')
            })
            .catch((e) => {
              this.loading.close();
              // this.loading = false;
              this.$message.error(e);
            });
        })
          .catch((e) => {
            this.loading.close();
            // this.loading = false;
            this.$message.error(e);
          });
      },

      //  提交
      submitTo(){
        // <!-- * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
        const typeApi = this.form.clipType ==1 ? submitProjectJob : this.form.clipType ==2 ? submitDiyJob : submitImageJob
        typeApi({
          id: this.form.projectId,//剪辑工程主键ID
          maximumCount:1, //视频号最大剪辑数1
          username:this.$store.state.user.info.username
        })
          .then((data) => {
            this.load()             // 修改1
            this.$message.success('发布成功！')
          })
          .catch((e) => {
            this.load()
            this.$message.error(e);
          });
      },
      // 清空form
      load(){
        this.hint=''
        this.form.cookie=''
        // 清空位置
        this.mapInfo={
          address:''
        }
        this.$refs.form.resetFields();
        this.$nextTick(() => {
          this.$refs['connected'].init()
          this.$refs['connected'].clear()
          this.$refs['seoActies'].clear()
        })
        this.form.materialType=1
        this.loading.close();
        // this.loading = false;
      }
    }
  }
</script>

<style scoped lang="less">
  .tiktok-title{
    font-size: 20px;
    margin:0 10px 40px;
    color: #000000;
  }

  /*云创作成片库/云闪推成片库 style */
  .d-margin{
    margin-left: 38px;
    margin-bottom: 22px;
  }
  .title-class,.sel-title-class{
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 21px;
    min-width: 100px;
    padding: 0 15px;
    height: 35px;
    border-radius: 5px;
  }
  .title-class{
    color: #757575;
    background: #FAFAFC;
  }
  .sel-title-class{
    color: #1E6CEB;
    background: #DDF0FF;
  }
  /*end*/


  .ai-class{
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 0 20px;
    border-radius: 5px;
  }
  .ai-blue{
    color: #fff;
    background: #93c7f5;
  }
  .ai-btn{
    color: #606266;
    border: 1px solid #dddddd;
  }
  .ai-btn:hover {
    /*background: rgba(50,62,78, 0.5);*/
    background: #e6f7ff;
    color:#1890ff;
    border: 1px solid #1890ff;
  }
  .ai-blue:hover {
    background: #2d90e8;
  }
</style>
